import React from 'react';
import {Layout, Row, Col} from 'antd';
import {inject, observer} from 'mobx-react';
import ResizableRect from 'react-resizable-rotatable-draggable';

import '@/css/pages/H5.css';

const {Content} = Layout;

@inject ('editorStore')
@observer
export default class PageMain extends React.Component {
  state = {
    active: -1,
    width: 300,
    height: 100,
    top: 10,
    left: 10,
    rotateAngle: 0,
  };
  renderHtml = () => {
    const {htmlBody} = this.props.editorStore;
    return [...htmlBody].map ((item, index) => {
      // const tmp = item;
      // if (item.style.lineHeight) {
      //   tmp.style.lineHeight = item.style.lineHeight + 'px';
      // }

      if (item.type === 'text') {
        return (
          <div
            key={'html' + index}
            style={{...item.style, transform:`rotateZ(${item.style.rotateAngle}deg)`}}
            className={
              item.active ? 'h5-block h5-text active' : 'h5-block h5-text'
            }
            onClick={() => {
              this.props.editorStore.addActive (index);
            }}
          >
            <p style={{...item.font,lineHeight: item.font.lineHeight + 'px', }} dangerouslySetInnerHTML={{__html: item.content.text}} />
          </div>
        );
      }
      return null;
    });
  };
  handleResize = (style, isShiftKey, type) => {
    // type is a string and it shows which resize-handler you clicked
    // e.g. if you clicked top-right handler, then type is 'tr'
    let {top, left, width, height} = style;
    const {changeActiveSize} = this.props.editorStore;

    top = Math.round (top);
    left = Math.round (left);
    width = Math.round (width);
    height = Math.round (height);
    this.setState ({
      top,
      left,
      width,
      height,
    });
    changeActiveSize ({
      top,
      left,
      width,
      height,
    });
  };

  handleRotate = rotateAngle => {
    const {changeActive} = this.props.editorStore;
    
    this.setState ({
      rotateAngle,
    });
    changeActive(rotateAngle,)
  };

  handleDrag = (deltaX, deltaY) => {
    const {changeActivePosition} = this.props.editorStore;

    this.setState ({
      left: this.state.left + deltaX,
      top: this.state.top + deltaY,
    });
    const {left, top} = this.state;
    changeActivePosition ({left, top});
  };
  handleDragStart = () => {
    const {htmlBody} = this.props.editorStore;
    const current = htmlBody.find(v => v.active);
    if (current){
      const {width, top, left, height, rotateAngle} = current.style;
      this.setState({
        width, top, left, height, rotateAngle
      });
    }
    // const {width, top, left, height, rotateAngle} = htmlBody[activeIndex].style;
    // console.log('render again', width);
  }
  renderRect = activeIndex => {
    if (activeIndex < 0) {
      return null;
    }
    const {htmlBody} = this.props.editorStore;
    const {width, top, left, height, rotateAngle} = htmlBody[activeIndex].style;
    
    return (
      <ResizableRect
        left={left}
        top={top}
        width={width}
        height={height}
        rotateAngle={rotateAngle}
        // aspectRatio={false}
        // minWidth={10}
        // minHeight={10}
        zoomable="n, w, s, e, nw, ne, se, sw"
        // rotatable={true}
        // onRotateStart={this.handleRotateStart}
        onRotate={this.handleRotate}
        // onRotateEnd={this.handleRotateEnd}
        // onResizeStart={this.handleResizeStart}
        onResize={this.handleResize}
        // onResizeEnd={this.handleUp}
        // onDragStart={this.handleDragStart}
        onDrag={this.handleDrag}
        onDragStart={this.handleDragStart}
        // onDragEnd={this.handleDragEnd}
      />
    );
  };

  render () {
    const {htmlBody} = this.props.editorStore;
    const activeIndex = [...htmlBody].findIndex (v => v.active);
    return (
      <Content>
        <div className="page-editor-content" style={{transform: 'scale(1, 1)'}}>
          <div className="page-editor-header">
            <Row>
              <Col span={8}>
                1
              </Col>
              <Col span={16}>
                1
              </Col>
            </Row>
          </div>
          <div className="page-editor-main">
            {this.renderRect (activeIndex)}

            {this.renderHtml ()}
          </div>
        </div>

      </Content>
    );
  }
}
